import React, { Component } from 'react';

import CourseService from '../../../services/Course';
import CommonService from '../../../services/Common';

import { COURSE_TH } from "config/table_config";

import { getDatas } from 'utils/tools';

import ListTitle from 'components/common/ListTitle';
import TableHead from 'components/common/TableHead';
import TableBody from './TableBody';

import './index.scss';

const courseService = new CourseService(),
      commonService = new CommonService();

export default class Course extends Component {
  constructor (props) {
    super(props);

    this.state = {
      title: '课程管理',
      courseData: [],
      fieldData: []
    }
  }

  async getCourseData () {
    const result = await courseService.getCourseData(),
          errorCode  = result.error_code,
          data = result.data,
          { history } = this.props;

    getDatas(errorCode, data, history, () => {
      const { courseData, fieldData } = data;

      courseData.forEach((cItem, cIndex) => {
        if (cItem.field === 0) {
          cItem.fieldTitle = '无分类';
        }

        fieldData.forEach((fItem, fIndex) => {
          if (cItem.field === fItem.id) {
            cItem.fieldTitle = fItem.title;
          }
        });

      });

      this.setState({
        courseData,
        fieldData
      });
    });
  }

  //修改课程管理里面的课程分类
  async onSelectChange (data, cid, index) {
    const { courseData } = this.state;

    courseData[index].field = data.id;
    courseData[index].fieldTitle = data.title;

    this.setState({
      courseData
    });

    const result = await courseService.changeCourseFieldData({
      cid,
      field: data.id
    });

    const errorCode = result.error_code;
    
    if (errorCode !== 0) {
      alert('修改课程分类失败,请重试');
      return;
    }
    // alert('修改课程分类成功');
  }

  //重新刷新页面
  onRefreshData () {
    this.getCourseData();//这种方式好很多很多，下面那种方式只是给用户看的，肉眼能看到刷新，哈哈~
    // window.location.reload();
  }

  //课程上下架
  async onStatusClick (cid, index) {
    const { courseData } = this.state,
          status = courseData[index].status;

    const cfm = window.confirm(`确认要${ status ? '下架' : '上架' }该课程吗？`);
    
    if (cfm) {
        switch (status) {
          case 1:
            courseData[index].status = 0;
            break;
          case 0:
            courseData[index].status = 1;
            break;
          default:
            break;
        }
      
        this.setState({
    
          courseData: courseData
    
        }, async () => {
    
          const result = await commonService.changeStatus({
            id: cid,
            status: courseData[index].status,
            field: 'COURSE'
          });
          
          const errorCode = result.error_code,//后端返回的0表示是执行成功的操作
                status = courseData[index].status;
    
          if (errorCode !== 0) {
            alert( status ? '该课程上架失败' : '该课程下架失败' );
            return;
          }
    
          //status为1表示上架状态，0表示下架状态
          // alert( status ? '上架成功' : '下架成功' );
        });

    };
  }

  componentDidMount () {
    this.getCourseData();
  }

  render () {

    const { title, courseData, fieldData } = this.state;

    return (
      <div className="list-container">
        <ListTitle 
          title={ title }
          onRefreshData={ this.onRefreshData.bind(this) }
        />

        <table className="list-table">
          <TableHead
            thData={ COURSE_TH }
          />
          <TableBody 
            courseData={ courseData }
            fieldData ={ fieldData }
            onSelectChange={ this.onSelectChange.bind(this) }
            onStatusClick={ this.onStatusClick.bind(this)}
          />
        </table>
      </div>
    );
  }
}